<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-Popup</title>
        <script include="vue" src="./static/libs/include-cesium-local.js"></script>
        <style type="text/css">
            #app {
                height: 100vh;
                width: 100vw;
            }
            .cesium-popup-content-wrapper {
                text-align: left;
                padding: 10px;
                overflow-y: auto;
                font-size: 1.2em;
                z-index: 9999;
                border: 1px solid #666666;
                box-shadow: 0px 0px 20px rgba(12, 28, 33, 0.6);
                -moz-box-shadow: 0px 0px 20px rgba(12, 28, 33, 0.6);
                -webkit-box-shadow: 0px 0px 20px rgba(12, 28, 33, 0.6);
                border-radius: 3px 3px 3px 3px;
                background: rgba(12, 28, 33, 0.6);
                background-size: 50% 50%;
                background-repeat: no-repeat;
            }
            .cesium-popup-tip {
                background: #666666;
                -webkit-box-shadow: 0 3px 14px rgba(12, 28, 33, 0.6);
                box-shadow: 0 3px 14px rgba(12, 28, 33, 0.6);
                width: 17px;
                height: 17px;
                padding: 1px;
                margin: -10px auto 0;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            .cesium-popup-content-wrapper {
                color: #ffffff;
            }
            .cesium-custom-popup-content {
                height: 150px;
                background: #ffffff;
                opacity: 0.7;
                color: #000000;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-scene
                :animation="false"
                :timeline="false"
                v-on:load="handleLoad"
                lib-path="./static/libs/cdn/cesium/Cesium.js"
                plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
            >
                <mapgis-3d-raster-layer :base-url="baseUrl"></mapgis-3d-raster-layer>
                <mapgis-3d-popup :position="position" v-on:load="bindEvent">
                    <div>
                        Vue槽-实现任何自定义样式
                        <div class="cesium-custom-popup-content">请在此处自定义内部内容</div>
                    </div>
                </mapgis-3d-popup>
            </mapgis-web-scene>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        baseUrl:
                            'http://t6.tianditu.com/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={z}&layer=img&style=default&tilerow={y}&tilecol={x}&tilematrixset=w&format=tiles&tk=f5347cab4b28410a6e8ba5143e3d5a35',
                        position: {
                            longitude: 110,
                            latitude: 30,
                            height: 300
                        }
                    };
                },
                mounted() {},
                methods: {
                    handleLoad(e) {
                        console.log('地图加初始化完毕！', e);
                    },
                    handleClick(e) {
                        console.log('点击事件', e);
                    },
                    bindEvent() {
                        let popup,
                            popups = document.getElementsByClassName('cesium-custom-popup-content');
                        if (popups.length > 0) {
                            popup = popups[0];
                            popup.addEventListener('click', this.handleClick.bind(this));
                            console.log('popup', popup);
                        }
                    },
                    handlePopupLoad(e) {
                        console.log('Popup初始化完毕！', e);
                        this.bindEvent();
                    }
                }
            });
        </script>
    </body>
</html>
